<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
  </head>

  <body>
    <button class="btn1">发送多个axios请求</button>
    <button class="btn2">发送延迟请求</button>
    <button class="btn3">取消axios请求</button>
    <script>
      // 一、发送多个axios请求 ： 同时发送多个axios请求，不是依次 。类似 Promise.all([p1,p2,p3]);
      let btn1 = document.querySelector(".btn1");
      // btn1.onclick = function () {
      //     // axios.get("/getdata").then(res=>{
      //     //     console.log(res);
      //     // })
      //     // axios.post("/getpostdata").then(res=>{
      //     //     console.log(res);
      //     // })
      //     axios.all([axios.get("/getdata"), axios.post("/getpostdata")]).then(res => {
      //         console.log(res);
      //     })
      // }
      // 1.请求拦截器
      axios.interceptors.request.use(function (config) {
        console.log("执行了请求拦截器");
        config.headers.token = "fdafds234fdsafd";
        return config;
      });

      // 2.返还拦截器
      axios.interceptors.response.use(function (response) {
        console.log("执行了返还拦截器", response);
       
        return response;
      });

      // 二、取消axios请求
      let btn2 = document.querySelector(".btn2");
      // 定义一个全局变量来存储取消axios的函数
      let cancel;
      btn2.onclick = async function () {
        if (cancel) {
          cancel(); // 取消上一个axios请求
        }
        try {
          let { data } = await axios.get("/timedata", {
            cancelToken: new axios.CancelToken(function (c) {
              // cancel 就是取消axios的函数，执行这个cancel函数就可以取消axios
              // cancel()
              cancel = c;
            }),
          });
          console.log(data);
        } catch (err) {
          console.log("??", err);
          // if(err){
          //     console.log("取消了axios");
          // }

          // axios 提供一个 isCancel 来判断错误  是否是一个取消axios的错误
          console.log(axios.isCancel(err)); // 如果是一个取消axios的错误 那么就返还true，否则就返还false
          if (axios.isCancel(err)) {
            console.log("axios被手动取消了!!");
          }
        }
      };

      // 取消请求
      let btn3 = document.querySelector(".btn3");
      btn3.onclick = function () {
        cancel(); // 取消axios请求
      };

      /* 
        一、axios 可以同时执行多个 axios请求
        二、取消axios请求
            1. 获取 cancel函数 且取消axios
            2. 判断 错误是否是取消axios的错误 isCancel(err);
            3. 防止不停点击发送axios的问题。 判断在取消axios就可以了。
        
        
        
        */
    </script>
  </body>
</html>
